<template>
  <div class='main'>
    <!--面包屑-->
    <div class='top'>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>项目群</el-breadcrumb-item>
        <el-breadcrumb-item>工单/报警</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/worderList' }">工单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div>
      <el-card class='card'>
        <!--标题文字-->
        <div class='headerTitle'>
          <div>工单列表</div>
        </div>

        <!--搜索输入框-->
        <div class='search'>
          <el-select v-model="value" placeholder="能效" size="default" style='width:150px;margin-left:1070px'>
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <el-select v-model="value1" placeholder="一小时" size="default" style='width:150px;margin-left:10px'>
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <el-date-picker v-model="value2" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" style='width:300px;margin-left:10px' />

          <el-button class='btn' @click="exportExcel">下载</el-button>

          <!-- <el-button class='btn'>打印</el-button> -->
        </div>

        <!--表格内容-->
        <div style='padding:0 20px'>
          <el-table id="table" :data="tt" border style="width: 100%;height:350px" height="350px" :header-cell-style="{
            'text-align': 'center',
            background: '#B4C7E7',
            color: '#333333',
          }" :cell-style="{
  'text-align': 'center',
  background: '#f5f8fb',
}" :header-cell-class-name="cellClass">
            <el-table-column type='selection' width="50px" align="center" />

            <el-table-column prop="situation" label="工单发出" width="80px" align="center" />

            <el-table-column prop="expectedCompletionTime" label="预期完成" width="80px" align="center" />

            <el-table-column prop="actualFinishTime" label="实际完成" width="80px" align="center" />

            <el-table-column prop="faultRecoveryTime" label="故障修复" width="80px" align="center" />

            <el-table-column prop="4" label="响应" width="80px" align="center" />

            <el-table-column prop="5" label="剩余" width="120px" align="center" />

            <el-table-column prop="durationTime" label="持续" width="120px" align="center" />

            <el-table-column prop="problemDescription" label="问题描述" width="180px" align="center" />

            <el-table-column prop="urgencyType" :filters="[
            { text: 1, value: 1 },
            { text: 2, value: 2 },
            { text: 3, value: 3 },
            { text: 4, value: 4 },
            { text: 5, value: 5 }]" class='type' class-name='jinji' :filter-method="filterTag" :label="urgency()"
              width="80px" align="center" />




            <el-table-column prop="workOrderType" :filters="[
            { text: '优化操作', value: 0 },
            { text: '设备故障', value: 1 },
            { text: '预测性维护', value: 2 }]" class-name='jinji' :filter-method="filterTag" :label="work_order()"
              width="120px" align="center">
              <template #default="scope">
                <div v-show="scope.row.workOrderType == '0'">优化操作</div>
                <div v-show="scope.row.workOrderType == '1'">设备故障</div>
                <div v-show="scope.row.workOrderType == '2'">预测性维护</div>
              </template>
            </el-table-column>

            <el-table-column prop="influenceType" label="影响范围" :filters="[
            { text: '能效', value: 0 },
            { text: '舒适', value: 1 },
            { text: '安全', value: 2 },
            { text: '所有', value: 3 }]" :filter-method="filterTag" width="90px" align="center">
              <template #default="scope">
                <div v-show="scope.row.influenceType == '0'">能效</div>
                <div v-show="scope.row.influenceType == '1'">舒适</div>
                <div v-show="scope.row.influenceType == '2'">安全</div>
              </template>
            </el-table-column>

            <el-table-column prop="riskType" label="风险" :filters="[
            { text: '高', value: 0 },
            { text: '中', value: 1 },
            { text: '低', value: 2 }]" :filter-method="filterTag" width="70px" align="center">
              <template #default="scope">
                <div v-show="scope.row.riskType == '0'">高</div>
                <div v-show="scope.row.riskType == '1'">中</div>
                <div v-show="scope.row.riskType == '2'">低</div>
              </template>
            </el-table-column>

            <el-table-column prop="involveEquipmentSystem" :filters="[
            { text: '制冷机', value: 0 },
            { text: '冷冻泵', value: 1 },
            { text: '冷却泵', value: 2 },
            { text: '冷却塔', value: 3 },
            { text: 'BA系统', value: 4 }]" :filter-method="filterTag" :label="equipment()" width="100px"
              align="center" />

            <el-table-column prop="operationalOrder" label="操作指令" width="180px" align="center" />

            <el-table-column prop="executiveCondition" label="执行情况" :filters="[
            { text: '1级已阅', value: 0 },
            { text: '2级已阅', value: 1 },
            { text: '3级已阅', value: 2 },
            { text: '处理中', value: 3 },
            { text: '无理由不执行(超时关闭)', value: 4 },
            { text: '成功执行', value: 5 },
            { text: '因故不执行', value: 6 }]" :filter-method="handleClick" width="90px" align="center">
              <template v-slot='scope'>
                <p @click='handleClick(scope.row)' class='cell' style="background-color: #bed5fc;">{{ scope.row.executiveCondition }}</p>
              </template>
            </el-table-column>

            <el-table-column prop="executiveName" :filters="[
            { text: '张三', value: 0 },
            { text: '李四', value: 1 }]" :filter-method="filterTag" :label="personnel()" width="100px" align="center" />

            <el-table-column prop="remark" label="备注" width="150px" align="center" />
          </el-table>
        </div>

        <!--分页-->
        <!-- <div class='page'>
          <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
            :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div> -->
      </el-card>
    </div>

    <!--详情弹出框-->
    <div>
      <el-dialog v-model="dialogVisible" title="工单编号" width="50%">
        <el-divider class='line' />
        <p class='number'>{{ form.data.workOrderNo }}</p>
        <el-form>
          <div class='detail'>
            <div>
              <div class='timetrwo'>
                <p>剩余时间</p>
                <p class='time'>{{ dayjs(form.data.remainingTime).format('YYYY-MM-DD') }}</p>
              </div>

              <div class='timer'>
                <p>触发时间</p>
                <p class='time'>{{ dayjs(form.data.triggeringTime).format('YYYY-MM-DD') }}</p>
              </div>

              <div class='timer'>
                <p>预期完成时间</p>
                <p class='time'>{{ dayjs(form.data.expectedCompletionTime).format('YYYY-MM-DD') }}</p>
              </div>
            </div>

            <div class='question'>
              <div>
                <el-form-item label="问题描述">
                  <el-input v-model="form.data.problemDescription" input-style='height:60px' />
                </el-form-item>
              </div>

              <div class='center'>
                <el-form-item label="可能原因">
                  <el-input v-model="form.data.possibleCause" input-style='height:60px' />
                </el-form-item>
              </div>

              <div class='center'>
                <el-form-item label="操作指令">
                  <el-input v-model="form.data.operationalOrder" input-style='height:60px' />
                </el-form-item>
              </div>

              <div class='center'>
                <el-form-item label="友情提示">
                  <el-input v-model="form.data.friendlyReminder" input-style='height:60px' />
                </el-form-item>
              </div>

            </div>

            <div class='right'>
              <div>
                <el-form-item label="已达级别">
                  <el-input v-model="form.data.executiveName" class='label' input-style='height:30px;width:250px' />
                </el-form-item>
              </div>

              <div class='detail'>
                <el-form-item label="工单反馈">
                  <el-select v-model="select" style="width:250px">
                    <el-option v-for="item in seList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </div>

              <div style="height: 92px;">
                <el-form-item label="无法执行">
                  <el-input v-model="form.data.cannotExecute" placeholder="无法执行理由陈述"
                    input-style='height:92px;width:250px' />
                </el-form-item>
                <el-button size='small' class='commit' @click="commit">确认提交</el-button>
              </div>

              <div class='success'>
                <el-form-item label="成功执行">
                  <el-input v-model="form.data.successfulExecution" placeholder="执行过程陈述" input-style='height:92px;width:250px' />
                </el-form-item>
                <el-button size='small' class='commit' @click="commit">确认提交</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref,watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { WorkOrder,updateWorkOrder,WorkOrderId } from "@/api/model/end"
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx/dist/xlsx.mini.min.js';
import dayjs from 'dayjs';

const value = ref('')
const value1 = ref('')
const value2 = ref('')
watch(()=>value.value,()=>{
  console.log(value.value);
  if (value.value!=='') {
    tt.value=tables.value.filter(i=> i.influenceType == value.value)

  }else{
    tt.value=tables.value
  }
  
})
const select = ref(0)

// const currentPage = ref(5)

const dialogVisible = ref(false)

// const pageSize = ref(100)
const tt = ref([])
const tables = ref([])

// const tableData = reactive([
//   {
//     1:'111',
//     2:'222',
//     3:'333',
//     3.5:'333',
//     4:'444',
//     5:'555',
//     6:'666',
//     7:'777',
//     aaa:'888',
//     9:'999',
//     10:'000',
//     11:'000',
//     12:'000',
//     13:'000',
//     14:'000',
//     15:'000',
//     16:'000',
//     address:'address'
//   },
//   {
//     1:'111',
//     2:'222',
//     3:'333',
//     4:'444',
//     5:'555',
//     6:'666',
//     7:'777',
//     aaa:'999',
//     9:'999',
//     10:'000',
//     11:'000',
//     12:'000',
//     13:'000',
//     14:'000',
//     15:'000',
//     16:'000'
//   }
// ])

let form = reactive({
  data:{}

})

const options1 = reactive([
  {
    label: '所有',
    value: ''
  },
  {
    label: '能效',
    value: 2
  },
  {
    label: '舒适',
    value: 1
  },
  {
    label: '安全',
    value: 3
  }
])

const options2 = reactive([
  {
    label: '一分钟',
    value: 0
  },
  {
    label: '五分钟',
    value: 1
  },
  {
    label: '一小时',
    value: 2
  },
  {
    label: '一天',
    value: 3
  },
  {
    label: '一月',
    value: 4
  },
])

const seList = reactive([
  {
    label: '设备正常',
    value: 0
  },
  {
    label: '设备损坏',
    value: 1
  },
  {
    label: '设备异常',
    value: 2
  },
  {
    label: '其他',
    value: 3
  },
])

//表头下拉选项框
const filterTag = (value, row) => {
  console.log('val', value);
  console.log('row', row.aaa);
  return row.aaa == value
}

//设置全选框隐藏
const cellClass = (row) => {
  if (row.columnIndex === 0) {
    return 'disabledCheck'
  }
}
function exportExcel() {
  //需给表格定义一个id或者类名
  console.log('1111111111', XLSX);
  let wb = XLSX.utils.table_to_book(document.querySelector('#table'));
  console.log('222');
  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '111.xlsx');  //***是自己导出文件时的命名，随意
  } catch (e) {
    if (typeof console !== 'undefined')
      console.log(e, wbout)
  }
  return wbout
}
//打开详情
const commit = async () => {
  form.data.feedbackType = select.value
  await updateWorkOrder(form.data)
  getWorkOrders()
  dialogVisible.value = false
}

//分页
// const handleSizeChange = (val) => {
//   console.log(`${val} items per page`)
// }
// const handleCurrentChange = (val) => {
//   console.log(`current page: ${val}`)
// }

//详情确认提交
const handleClick = async(e) => {
  
  const {data} = await WorkOrderId(e.id)
  console.log('详情',data);
  form.data = data
  select.value = Number(data.feedbackType)
  dialogVisible.value = true
}


//表头文字换行
const urgency = () => {
  return `紧急\n类别`;
}

const work_order = () => {
  return `工单\n类别`;
}

const equipment = () => {
  return `涉及\n设备/系统`;
}

const personnel = () => {
  return `执行\n人员姓名`;
}

onMounted(() => {
  getWorkOrders()
})

// 获取工单列表
const getWorkOrders = async () => {
  let res = await WorkOrder()
  console.log(res, "sssssssssss")
  if (res.code == 200) {
    tables.value = res.data
    tt.value = res.data
  }
}

</script>

<style scoped lang='less'>
:deep(.jinji) {
  .cell {
    position: relative;

    span {
      position: absolute;
      right: 9px;
      bottom: 0;
    }
  }
}

.main {
  height: 100%;
  background-color: #eaf2fa;
  overflow: hidden;
}

.top {
  margin-left: 30px;
  margin-top: 5px;
}

.card {
  width: 100%;
  height: 550px;
  margin-top: 15px;

}

.card :deep(.el-card__body) {
  padding: 0 !important;
}

.search {
  display: flex;
  margin-top: 20px;
}

.btn {
  margin-left: 10px;
  width: 110px;
  background-color: #8faadc;
  color: white;
}

.el-table {
  margin-top: 10px;
  padding: 0;
}

.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 32px;
}

.el-table :deep(.disabledCheck) .cell .el-checkbox__inner {
  display: none !important;
}

.el-table :deep(.disabledCheck)>div {
  white-space: normal !important;
  line-height: 15px;
}

.el-table :deep(.disabledCheck) .cell::before {
  content: '收到确认';
}

:deep(.el-table th.el-table__cell)>.cell {
  white-space: pre;
}

.page {
  margin-left: 1280px;
  margin-top: 10px;
}

:deep(.el-dialog__title) {
  color: #7b6ea5;
  letter-spacing: 1px;
}

.number {
  color: #636ea6;
  font-weight: bold;
  position: absolute;
  left: 110px;
  top: 25px;
}

.detail {
  display: flex;
}

.time {
  font-size: 20px;
  color: #6b8cd4;
  margin-top: 10px;
}

.timer {
  margin-top: 40px;
}

.timetrwo {
  margin-top: 30px;
}

.question {
  margin-left: 30px;
}

.center {
  margin-top: 20px;
}

.cause {
  overflow: hidden;
}

.right {
  margin-left: 30px;
}

.commit {
  height: 30px;
  width: 65px;
  position: relative;
  top: -80px;
  left: -5px;
  background-color: #8faadc;
  color: white;
}

.success {
  margin-top: 20px;
}

.line {
  position: absolute;
  top: 40px;
  left: 0px;
}

.type {
  font-size: 20px;
}

.cell {
  cursor: pointer;
  color: #606266;
}

.cell:hover {
  color: rgb(77, 98, 165);
}
</style>